<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="vue文件" name="first">
        <codemirror v-if="activeName === 'first'" v-model="code"  :options="cmOptions"/>
      </el-tab-pane>
      <el-tab-pane label="echarts配置文件" name="second" v-if="showEchartsTab">
        <codemirror v-if="activeName === 'second'" v-model="echartsCode"  :options="cmOptions"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { codemirror } from 'vue-codemirror'
  import 'codemirror/mode/javascript/javascript.js';
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/theme/material-palenight.css';
  export default {
    name: 'CodeMirror',
    inheritAttrs: false,
    components: {
      codemirror
    },
    props: {
      str: {
        type: String,
        default: 'const a = 10'
      },
      echartsStr: {
        type: String,
        default: ''
      }
    },
    watch: {
      str(newVal) {
        this.code = newVal
      },
      echartsStr(newVal) {
        this.echartsCode = newVal
        if(!newVal.replace(/\s+/g,"")) {
          this.showEchartsTab = false
        }else {
          this.showEchartsTab = true
        }
      },
    },
    data() {
      return {
        code: this.str,
        echartsCode: this.echartsStr,
        cmOptions: {
          // codemirror options
          tabSize: 4,
          mode: 'text/javascript',
          theme: 'material-palenight',
          lineNumbers: true,
          line: true
          // more codemirror options, 更多 codemirror 的高级配置...
        },
        activeName: 'first',
        showEchartsTab: true,
      };
    },
    methods: {
      handleClick(tab, event) {
        this.$emit('switch', this.activeName)
      }
    }
  };
</script>

<style>
</style>
